<template>
   <div id="index-banner" class="Banner-component">
        <!-- <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in items">
                    <img :src="item.image">
                </div>
            </div>
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
        </div> -->
        <el-carousel  @change="change" trigger="click" height="725px">
          <el-carousel-item v-for="item in items" :key="item">
            <a :href="item.url">
              <img class="bannerImg" :src="item.image">
            </a>
          </el-carousel-item>
        </el-carousel>
   </div>
</template>

<script>
import Swiper from '../../static/js/swiper-3.4.2.min'
import $ from '../../static/js/jquery.min'
export default {
	components:{
		
	},
    data(){ /*
             Banner：image；广告：
             image+url（第三方链接）；
             走势图：image+title
         */
         this.$http.get("v1"+"/"+1+"/"+"slide",{
            }).then(res=>{
                if(res.data.success){
                    this.items=res.data.infor;
                }
            })
       return{
            "bannerHeight":0,
          "items":[],
          "mySwiper":null
       }
    },
    mounted(){
        // this.mySwiper = new Swiper($('#index-banner .swiper-container'),{
        //     direction : 'horizontal',
        //     prevButton:'.swiper-button-prev',
        //     nextButton:'.swiper-button-next',
        //     autoplay: 5000,
        // })
    },
    updated(){
        // this.mySwiper.update();
    },
    methods:{
        change(a){
            this.bannerHeight = $(".bannerImg")[a].height;
        }
    }
}
</script>

<style lang="scss">
    @import "../style/base/_base";
    @import "../../static/css/swiper-3.4.2.min.css";
.Banner-component{
    width:100%;
    margin:0 auto;
   .swiper-container {
        width: 100%;

    } 
    // .swiper-button-next,.swiper-button-prev{
    //     opacity: 0.5;
    // }
    
    .el-carousel{
        width: 100%;
        img{
           width: 100%;
           height:100%;
        }
        // height:auto;
    }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
}
</style>